<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { try_get_users, User, try_delete_user } from "./user";
import { ElNotification } from "element-plus";
const users = ref<User[]>();
onMounted(async () => {
  refresh();
});

const refresh = async () => {
  try {
    is_loading.value = true;
    users.value = await try_get_users();
  } catch (error) {
    ElNotification.error({
      message: "获取用户失败!\n" + error,
      duration: 10000,
      title: "Error",
    });
  }
  is_loading.value = false;
};

const is_loading = ref(false);
const search_types = {
  name: "姓名",
  nickName: "昵称",
  role: "角色",
};
const search_type = ref("name");

const keyword = ref("");

const filtered_users = computed(() => {
  if (keyword.value && search_type.value) {
    return users.value?.filter((u) =>
      u[search_type.value].toLowerCase().includes(keyword.value.toLowerCase())
    );
  } else {
    return users.value;
  }
});

const delete_row = async (rid: number) => {
  try {
    const user = filtered_users.value![rid];
    if (!user) {
      return;
    }
    const deleted = await try_delete_user(user.id);
    await refresh();
    ElNotification.success({
      message: `删除用户[${deleted.nickName}]成功!`,
      title: "Success",
      duration: 10000,
    });
  } catch (error) {
    ElNotification.error({
      message: "删除用户失败!" + error,
      title: "Error",
      duration: 10000,
    });
  }
};
</script>

<template>
  <div class="w-full grid-row-auto-auto justify-center h-full">
    <div class="mt-4 h-0">
      <el-input
        type="text"
        v-model="keyword"
        class="text-center rounded-full w-[300px]"
        placeholder="检索关键字"
        clearable
      >
        <template #prepend>
          <el-select v-model="search_type" placeholder="检索项目" style="width: 100px">
            <el-option
              v-for="(value, name) in search_types"
              :value="name"
              :label="value"
            ></el-option>
          </el-select>
        </template>
      </el-input>
    </div>
    <el-table
      stripe
      border
      v-loading="is_loading"
      :data="filtered_users"
      style="width: 800px;max-height: 500px;"
      highlight-current-row
      empty-text="没有数据..."
      class="shadow-xl"
    >
      <el-table-column type="index" width="60" label="No" />
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="nickName" label="昵称" width="160"></el-table-column>
      <el-table-column prop="role" label="角色" width="160"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-popconfirm title="确认删除?" @confirm="delete_row(scope.$index)">
            <template #reference>
              <el-button type="danger"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.grid-row-auto-auto {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1;
}
</style>
<style></style>
